<div class="content-below-toolbar">
	
	<div class="inner-content">
		
		<div class="breadcrumb">
			<a href="../../">Products</a>
			{if $product.parent}
				<a href="../{$product.parent.code}/">{$product.parent.code} - {$product.parent.title|escape:"html":"UTF-8"}</a>
				{$product.code}
			{else}
				{$product.code}
				{if $product.title}
				 	- <span id="breadcrumb_title">{$product.title|escape:"html":"UTF-8"}</span>
				{else}
					Add product
				{/if}
			{/if}
		</div>
				
		<p><label>Simple attributes</label></p>
		<table class="table" id="simpleattributes" style="width:auto">
			<tr>
				<th>Name</th>
				<th>Values</th>
				<th>Image prefix</th>
				<th>Sort</th>
			</tr>
			{foreach from="`$simpleattributes`" key="index" item="simpleattribute"}
				<tr>
					<td style="vertical-align:top"><input type="text" name="simpleattributes[{$index}][title]" value="{$simpleattribute.title}" style="width:10em;" /></td>
					<td style="vertical-align:top"><input type="hidden" name="simpleattributes[{$index}][type]" value="{$simpleattribute.type}" />
						{if $simpleattribute.type=='select'}
						<table class="table" id="values_{$simpleattribute.id}" style="width:auto">
							<tr>
								<th>Value</th>
								<th>Price</th>
								<th>Sort</th>
							</tr>
							{foreach from="`$simpleattribute.values`" key="index2" item="value"}
								<tr>
									<td><input type="text" name="simpleattributes[{$index}][values][{$index2}][value]" value="{$value.value}" style="width:10em;" /></td>
									<td><input type="text" name="simpleattributes[{$index}][values][{$index2}][price]" value="{$value.price}" style="width:5em;text-align:center" /></td>
									<td><input type="text" name="simpleattributes[{$index}][values][{$index2}][sort]" value="{$value.sort}" style="width:5em;text-align:center" /></td>
								</tr>
							{foreachelse}
								<tr>
									<td><input type="text" name="simpleattributes[{$index}][values][0][value]" value="" style="width:10em;" /></td>
									<td><input type="text" name="simpleattributes[{$index}][values][0][price]" value="" style="width:5em;text-align:center" /></td>
									<td><input type="text" name="simpleattributes[{$index}][values][0][sort]" value="" style="width:5em;text-align:center" /></td>
								</tr>
							{/foreach}
							<tr class="placeholder" style="display:none">
								<td><input type="text" name="simpleattributes[{$index}][values][-index-][value]" value="" style="width:10em;" /></td>
								<td><input type="text" name="simpleattributes[{$index}][values][-index-][price]" value="" style="width:5em;text-align:center" /></td>
								<td><input type="text" name="simpleattributes[{$index}][values][-index-][sort]" value="" style="width:5em;text-align:center" /></td>
							</tr>
						</table>
						<button id="add_value_{$simpleattribute.id}" data-simpleattributeid="{$simpleattribute.id}" class="add_value">Add Value</button>
						{else}
						Free text entry
						{/if}
					</td>
					<td style="vertical-align:top">{if $simpleattribute.type=='select'}<input type="text" name="simpleattributes[{$index}][image_prefix]" value="{$simpleattribute.image_prefix}" style="width:10em;" />{/if}</td>
					<td style="vertical-align:top"><input type="text" name="simpleattributes[{$index}][sort]" value="{$simpleattribute.sort}" style="width:5em;text-align:center" /></td>
				</tr>
			{/foreach}
			<tr class="placeholder select" style="display:none">
				<td style="vertical-align:top"><input type="text" name="simpleattributes[-index1-][title]" value="" style="width:10em;" /></td>
				<td style="vertical-align:top"><input type="hidden" name="simpleattributes[-index1-][type]" value="select" />
					<table class="table" id="values_-index1-" style="width:auto">
						<tr>
							<th>Value</th>
							<th>Price</th>
							<th>Sort</th>
						</tr>
						<tr>
							<td><input type="text" name="simpleattributes[-index1-][values][0][value]" value="" style="width:10em;" /></td>
							<td><input type="text" name="simpleattributes[-index1-][values][0][price]" value="" style="width:5em;text-align:center" /></td>
							<td><input type="text" name="simpleattributes[-index1-][values][0][sort]" value="" style="width:5em;text-align:center" /></td>
						</tr>
						<tr class="placeholder" style="display:none">
							<td><input type="text" name="simpleattributes[-index1-][values][-index-][value]" value="" style="width:10em;" /></td>
							<td><input type="text" name="simpleattributes[-index1-][values][-index-][price]" value="" style="width:5em;text-align:center" /></td>
							<td><input type="text" name="simpleattributes[-index1-][values][-index-][sort]" value="" style="width:5em;text-align:center" /></td>
						</tr>
					</table>
					<button data-simpleattributeid="-index-" class="add_value">Add Value</button>
				</td>
				<td style="vertical-align:top"><input type="text" name="simpleattributes[-index1-][image_prefix]" value="" style="width:10em;" /></td>
				<td style="vertical-align:top"><input type="text" name="simpleattributes[-index1-][sort]" value="" style="width:5em;text-align:center" /></td>
			</tr>
			<tr class="placeholder text" style="display:none">
				<td style="vertical-align:top"><input type="text" name="simpleattributes[-index1-][title]" value="" style="width:10em;" /></td>
				<td style="vertical-align:top"><input type="hidden" name="simpleattributes[-index1-][type]" value="text" />
					Free text entry
				</td>
				<td style="vertical-align:top"><input type="text" name="simpleattributes[-index1-][image_prefix]" value="" style="width:10em;" /></td>
				<td style="vertical-align:top"><input type="text" name="simpleattributes[-index1-][sort]" value="" style="width:5em;text-align:center" /></td>
			</tr>
		</table>
		<button id="add_select">Add multiple choice</button>
		<button id="add_text">Add text</button>
		
		<script type="text/javascript" charset="utf-8">
			{literal}
			$(function() {
				
				var add_value_counter = 1;
				
				$('.add_value').livequery('click', function(e) {
					console.log('hello!');
					e.preventDefault();
					var simpleattributeid = $(this).attr('data-simpleattributeid');
					console.log(simpleattributeid);
					var placeholder = $('#values_'+simpleattributeid).find('.placeholder');
					var new_row = placeholder.clone().show().removeClass('placeholder');
					new_row.find('input').each(function() {
						$(this).attr('name', $(this).attr('name').replace(/-index-/, add_value_counter));
					});
					add_value_counter++;
					new_row.insertBefore(placeholder);
				});
				
				
				var add_simpleattribute_counter = 1;
				
				$('#add_select').click(function(e) {
					e.preventDefault();
					var placeholder = $('.placeholder.select')
					var new_row = placeholder.clone().show().removeClass('placeholder');
					new_row.find('input').each(function() {
						$(this).attr('name', $(this).attr('name').replace(/-index1-/, 'new'+add_simpleattribute_counter));
					});
					new_row.find('button').each(function() {
						$(this).attr('data-simpleattributeid', $(this).attr('data-simpleattributeid').replace(/-index-/, 'new'+add_simpleattribute_counter));
					});
					new_row.find('table').each(function() {
						$(this).attr('id', $(this).attr('id').replace(/-index1-/, 'new'+add_simpleattribute_counter));
						console.log($(this));
					});
					add_simpleattribute_counter++;
					new_row.insertBefore(placeholder);
				});
				
				$('#add_text').click(function(e) {
					e.preventDefault();
					var placeholder = $('.placeholder.text')
					var new_row = placeholder.clone().show().removeClass('placeholder');
					new_row.find('input').each(function() {
						$(this).attr('name', $(this).attr('name').replace(/-index1-/, 'new'+add_simpleattribute_counter));
					});
					add_simpleattribute_counter++;
					new_row.insertBefore(placeholder);
				});
			});
			{/literal}
		</script>
	</div>
</div>